<template>
  <div class="sa-container">
    <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
      <el-form-item label="活动名称">
        <el-input v-model="sizeForm.imei"></el-input>
      </el-form-item>

      <el-form-item label="活动时间">
        <el-date-picker
            v-model="sizeForm.date1"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <div class="video">
      <video
          id='videoElement'
          controls
          autoplay
          muted
      ></video>
    </div>

    <el-button type="primary" size="mini" @click="clickHandle" style="margin: 10px">播放</el-button>
    <el-button type="primary" size="mini" @click="reset" style="margin: 10px">重置</el-button>
  </div>

</template>


<script>
import flvjs from "flv.js";

export default {
  data() {
    return {
      sizeForm: {
        imei: '',
        date1: ''
      },
      flvPlayer: null,
      inputValue: "",
      url: "",
      list: []
    };
  },
  created() {
    // this.findAllListApi();
  },
  methods: {
    onSubmit() {
      this.$axios.post("http://192.168.1.162:8082/gps-vehicle/device808/openHistory", {
        imei: this.sizeForm.imei,
        startDate: parseInt((new Date(this.sizeForm.date1[0] ).getTime() / 1000 )),
        endDate: parseInt((new Date(this.sizeForm.date1[1] ).getTime() / 1000 ))
      }).then(res => {
        console.log(res.data)
      })
      this.destroyVideo()
      this.clickHandle();
    },
    //查询
    search() {
      console.log("搜索")
      this.destroyVideo()
      this.clickHandle();
    },
    reset() {
      console.log("重置")
      this.destroyVideo()
      this.closePlayer()
    },
    clickHandle() {
      this.url = 'http://192.168.1.161:5868/video/' +'0'+this.sizeForm.imei.substr(4,this.sizeForm.imei.length)+"-1";
      this.createVideo();
    },

    play() {
      this.flvPlayer.play();
    },
    closePlayer(){
      this.$axios.post("http://192.168.1.162:8082/gps-vehicle/device808/closeHistory", {
        imei: this.sizeForm.imei,
        type:"2"
      }).then(res => {
        console.log(res.data)
      })
    },
    createVideo() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById("videoElement");
        this.flvPlayer = flvjs.createPlayer(
            {
              type: "flv",
              isLive: true,
              hasAudio: false,
              url: this.url
            },
            {
              enableWorker: false, //不启用分离线程
              enableStashBuffer: false, //关闭IO隐藏缓冲区
              reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
              autoCleanupSourceBuffer: true //自动清除缓存
            }
        );

        this.flvPlayer.attachMediaElement(videoElement);
        // this.flvPlayer.load();

        if (this.url !== "" && this.url !== null) {
          this.flvPlayer.load();
          this.flvPlayer.play();
        }
      }


      // eslint-disable-next-line no-unused-vars
      this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
        if (this.flvPlayer) {
          this.reloadVideo();
        }
        // errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
        // errType是 MediaError时，对应errDetail是MediaMSEError   或MEDIA_SOURCE_ENDED
      });
    },

    reloadVideo() {
      this.destroyVideo();
      this.createVideo();
    },
    destroyVideo() {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;
    },
    findAllListApi() {

    }
  }
};
</script>

<style scoped>
.sa-container {
  flex-flow: column;
  display: flex;
  width: 60%;
  left: 20%;
}

.videoBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* justify-content: space-between; */
  /* flex-wrap: wrap; */
}

.videoList {
  width: 550px;
  height: 20px;
  display: flex;
  justify-content: space-between;

}

.search {
  margin-left: 50px;
  width: 100%;
}

el-input {
  width: 100px;
  height: 30px;
  border: 1px solid #000000;
}

.video {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-evenly;


}

.video video {
  object-fit: contain;
  width: 400px;
  height: 300px;
}
</style>
